<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
	<p id="loginheader">Register on iSquirrel</p>

	<div id="facebookconnect">
		
		<p style="font-size:0.85em">
			Before registering with iSquirrel, you can connect your-soon-to-created account to Facebook. This way we can retrieve and match your Facebook
			friends with your iSquirrel friends so your iSquirrel network grows. <br><br>A larger network results in recommendations from a broader range of 
			subjects, as we take into account your friends likes and dislikes and compare them to your profile.<br><br>
			So, to get started click on the Facebook Connect button.
		</p>
		<div id="fb_login">
			<img onclick="window.facebook_login();" id="fb_login_image" src="http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_large_long.gif" alt="Connect" />		
		</div>
		
		<div id="notfbuser">
			<p style="font-size:1.1em">Not a Facebook user?</p><p><a id="registerdirect" onClick="showRegForm();">Proceed to register</a> with iSquirrel.</p>
		</div>
	</div>
<form style="display:none" id="registerform" method="post" action="servlet/RegisterUser">

		<p>
		<label for="username">Your username *</label><br>
		<input class="biginput" type="text" id="username" name="username"/>	
		</p>
		
		<p>
		<label for="password">Your Password *</label><br>
		<input class="biginput" type="password" id="password" name="password"/>
		</p>
		
		<p>
		<label for="cpassword">Confirm Password *</label><br>
		<input class="biginput" type="password" id="cpassword" name="cpassword"/>
		</p>
		
		<p>
		<label for="name">First Name *</label><br>
		<input class="biginput" type="text" id="name" name="name"/>
		</p>
		
		<p>
		<label for="surname">Last Name *</label><br>
		<input class="biginput" type="text" id="surname" name="surname"/>
		</p> 
		<p>
		<label for="DOB">Date Of Birth *</label><br>
		<select id="month" name="month">
			<option value=""> - Month - </option>
			<option value="1">January</option>
			<option value="2">Febuary</option>
			<option value="3">March</option>
			<option value="4">April</option>
			<option value="5">May</option>
			<option value="6">June</option>
			<option value="7">July</option>
			<option value="8">August</option>
			<option value="9">September</option>
			<option value="10">October</option>
			<option value="11">November</option>
			<option value="12">December</option>
		</select>	
		<select id="day" name="day">
				<option value=""> - Day - </option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
				<option value="24">24</option>
				<option value="25">25</option>
				<option value="26">26</option>
				<option value="27">27</option>
				<option value="28">28</option>
				<option value="29">29</option>
				<option value="30">30</option>
				<option value="31">31</option>
		</select>
	
		<select id="year" name="year">
			<option value=""> - Year - </option>
			<option value="2004">2004</option>
			<option value="2003">2003</option>
			<option value="2002">2002</option>
			<option value="2001">2001</option>
			<option value="2000">2000</option>
			<option value="1999">1999</option>
			<option value="1998">1998</option>
			<option value="1997">1997</option>
			<option value="1996">1996</option>
			<option value="1995">1995</option>
			<option value="1994">1994</option>
			<option value="1993">1993</option>
			<option value="1992">1992</option>
			<option value="1991">1991</option>
			<option value="1990">1990</option>
			<option value="1989">1989</option>
			<option value="1988">1988</option>
			<option value="1987">1987</option>
			<option value="1986">1986</option>
			<option value="1985">1985</option>
			<option value="1984">1984</option>
			<option value="1983">1983</option>
			<option value="1982">1982</option>
			<option value="1981">1981</option>
			<option value="1980">1980</option>
			<option value="1979">1979</option>
			<option value="1978">1978</option>
			<option value="1977">1977</option>
			<option value="1976">1976</option>
			<option value="1975">1975</option>
			<option value="1974">1974</option>
			<option value="1973">1973</option>
			<option value="1972">1972</option>
			<option value="1971">1971</option>
			<option value="1970">1970</option>
			<option value="1969">1969</option>
			<option value="1968">1968</option>
			<option value="1967">1967</option>
			<option value="1966">1966</option>
			<option value="1965">1965</option>
			<option value="1964">1964</option>
			<option value="1963">1963</option>
			<option value="1962">1962</option>
			<option value="1961">1961</option>
			<option value="1960">1960</option>
			<option value="1959">1959</option>
			<option value="1958">1958</option>
			<option value="1957">1957</option>
			<option value="1956">1956</option>
			<option value="1955">1955</option>
			<option value="1954">1954</option>
			<option value="1953">1953</option>
			<option value="1952">1952</option>
			<option value="1951">1951</option>
			<option value="1950">1950</option>
			<option value="1949">1949</option>
			<option value="1948">1948</option>
			<option value="1947">1947</option>
			<option value="1946">1946</option>
			<option value="1945">1945</option>
			<option value="1944">1944</option>
			<option value="1943">1943</option>
			<option value="1942">1942</option>
			<option value="1941">1941</option>
			<option value="1940">1940</option>
			<option value="1939">1939</option>
			<option value="1938">1938</option>
			<option value="1937">1937</option>
			<option value="1936">1936</option>
			<option value="1935">1935</option>
			<option value="1934">1934</option>
			<option value="1933">1933</option>
			<option value="1932">1932</option>
			<option value="1931">1931</option>
			<option value="1930">1930</option>
			<option value="1929">1929</option>
			<option value="1928">1928</option>
			<option value="1927">1927</option>
			<option value="1926">1926</option>
			<option value="1925">1925</option>
			<option value="1924">1924</option>
			<option value="1923">1923</option>
			<option value="1922">1922</option>
			<option value="1921">1921</option>
			<option value="1920">1920</option>
			<option value="1919">1919</option>
			<option value="1918">1918</option>
			<option value="1917">1917</option>
			<option value="1916">1916</option>
			<option value="1915">1915</option>
			<option value="1914">1914</option>
			<option value="1913">1913</option>
			<option value="1912">1912</option>
			<option value="1911">1911</option>
			<option value="1910">1910</option>
			<option value="1909">1909</option>
			<option value="1908">1908</option>
			<option value="1907">1907</option>
			<option value="1906">1906</option>
			<option value="1905">1905</option>
			<option value="1904">1904</option>
			<option value="1903">1903</option>
			<option value="1902">1902</option>
			<option value="1901">1901</option>
			<option value="1900">1900</option>
		</select>
	</p>
	<p>	
		<label for="Sex">Sex *</label>
		<select name="sex" id="sex">
			<option value=""> - Select Sex: - </option>
			<option value="Male">Male</option>
			<option value="Female">Female</option>
		</select>
	</p>

		<input type="hidden" id="hidden_fbid" name="fbid"/>
		<input type="submit" id="loginbtn" name="submit" value="Register"/>
		
</form>

<script type="text/javascript">

	function showRegForm(){

		$("registerform").show();	
		$("hidden_fbid").value = 0;
		
	}
	
	facebook_login = function(){

		$("fb_login_image").src='/<%= request.getRequestURI().split("/")[1] %>/images/barloader.gif';
		$("notfbuser").hide();
		var api_key = '748303a5c47afd1a0823809e012c155e'; 
		FB_RequireFeatures(["Api"], function(){ 

			FB.Facebook.init(api_key, "/iSquirrel/xd_receiver.htm");

			//create a batch request for better performance 
			var sequencer = new FB.BatchSequencer();
			
			var api = FB.Facebook.apiClient;
			
			FB.Connect.requireSession(function(exception){ 
				
				var uid = api.get_session().uid;
				$("hidden_fbid").value = uid;
				
				var pendingUserData = api.users_getInfo([uid],["first_name", "last_name","birthday_date","sex"],sequencer);

				sequencer.execute(function(){

					$("fb_login").update("<span style='font-size:1.2em;font-weight:bold'>Okay, you are connected with Facebook. <br><br>You now need to create an account on iSquirrel.</span>");
					$("registerform").show();
					$("name").value = pendingUserData.result[0].first_name;
					$("surname").value = pendingUserData.result[0].last_name;
					
					var bdate = pendingUserData.result[0].birthday_date.split("/");
					var sex = pendingUserData.result[0].sex;
					if (bdate){
						var day = parseFloat(bdate[1]);
						var month = parseFloat(bdate[0]);
						var year = parseFloat(bdate[2]);

						$("month").value = month;
						$("day").value = day;
						$("year").value = year;
					}

					if (sex){

						$("sex").value = sex.capitalize();
						
					}
					
					
				});			
			}, function(){

				$("fb_login_image").src='http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_large_long.gif';
				$("notfbuser").show();

				}); 
		});
	};
		
	new Fudel.Form('registerform', { 
		onOK : function() {
			Fudel.redirect('/<%= request.getRequestURI().split("/")[1] %>','success');
		},
		onError : function(obj) {
			alert(obj.ERROR);
		}
	});
	

</script>